<template>
  <div>
    <h2>复利计算器</h2>
    <div class="container calculator-wrapper">
      <div class="form-group">
          <label for="principal">本金：</label>
          <input 
              id="principal" 
              v-model.number="principal" 
              type="number" 
              required 
          />
      </div>
      <div class="form-group">
          <label for="rate">收益率 (%)：</label>
          <input 
              id="rate" 
              v-model.number="rate" 
              type="number" 
              required 
          />
      </div>
      <div class="form-group">
          <label for="frequency">复利次数：</label>
          <input 
              id="frequency" 
              v-model.number="frequency" 
              type="number" 
              required 
          />
      </div>
      <button @click="calculate" class="execute-button">计算</button>
      <div v-if="amount">
        <p style="text-align: center;">{{ amount.toFixed(2) }}</p>
      </div>
  </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  name: 'CompoundInterestCalculator',
  setup() {
      const principal = ref<number>(0);
      const rate = ref<number>(0);
      const frequency = ref<number>(0);
      const amount = computed(() => {
          if (principal.value <= 0 || rate.value <= 0 || frequency.value <= 0 ) {
              return null;
          }
          const r = rate.value / 100;
          const n = frequency.value;
          return principal.value * Math.pow(1 + r, n);
      });

      const calculate = () => {
          // Trigger re-computation of the amount
          return amount.value;
      };

      return {
          principal,
          rate,
          frequency,
          amount,
          calculate,
      };
  },
});
</script>

<style scoped lang="scss">
@use "../assets/common.scss";

.calculator-wrapper {
  width: 300px; // 调整宽度，使其更紧凑，可按需修改  
}


.form-group {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

label {
  font-size: 16px;
  margin-bottom: 5px;
}

input {
  padding: 10px;
  font-size: 18px;
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc;
  text-align: right;
}

div[v-if="amount"] {
  padding: 10px;
  background-color: #f4f4f4;
  margin-top: 10px;
}
</style>